<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./assets/lib/echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        // 3.2 指定图表的配置项和数据
        option = {
            title: {
                text: '成绩 Score'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                }
            },
            legend: {
                data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: ['2012', '2013', '2014', '2015', '2016']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '平均分',
                    type: 'bar',
                    //矩形间的间距
                    barGap: 0.2,
                    data: [320, 332, 301, 334, 390]
                },
                {
                    name: '低于60分人数',
                    type: 'bar',
                    data: [220, 182, 191, 234, 290]
                },
                {
                    name: '60到80分之间',
                    type: 'bar',
                    data: [150, 232, 201, 154, 190]
                },
                {
                    name: '高于80分人数',
                    type: 'bar',
                    data: [98, 77, 101, 99, 40]
                }
            ]
        };

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>